<template>


	<div class="login-box containlogin">
		<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="70px" class="demo-ruleForm " style=" padding: 30px;">
			<h1 class="hlogin">登录</h1>
			<hr />
			<el-form-item label="邮箱" prop="useremail">
				<el-input v-model="ruleForm.useremail"></el-input>
			</el-form-item>

			<el-form-item label="密码" prop="pass" class='itemlogin'>
				<el-input class='itemlogin' type="password" v-model="ruleForm.pass" autocomplete="off"></el-input>
			</el-form-item>



			<el-form-item>
				<el-button style='margin-left: 30px;' type='success' @click="submitForm">确定</el-button>
				<el-radio-group v-model="radio" style='margin-left: 50px;'>
					<el-radio :label="3">记住密码</el-radio>
				</el-radio-group>
			</el-form-item>
		</el-form>
	</div>

</template>

<script>
	import "assets/css/css/reset.css"
	import "assets/css/css/login.css"
	import {
		login
	} from '@/api/user.js'
	export default {
		name: "Login",
		data() {
			var checkUserName = (rule, value, callback) => {
				if (!value) {
					return callback(new Error('用户名不能为空'));
				}
				this.authemail = true;
			};
			var validatePass = (rule, value, callback) => {
				if (value === '') {
					callback(new Error('请输入密码'));
				}
				this.authpass = true;
			};
			return {
				authemail: false,
				authpass: false,
				message: '',
				asd: '',
				radio: '',
				ruleForm: {
					useremail: '',
					pass: ''

				},
				rules: {
					useremail: [{
						validator: checkUserName,
						trigger: 'blur'
					}],
					pass: [{
						validator: validatePass,
						trigger: 'blur'
					}],

				}
			};
		},
		methods: {
			submitForm() {
				if (this.authemail && this.authpass){
					login(this.ruleForm.useremail, this.ruleForm.pass).then(
						// 请求成功的处理方式
						res => {
							this.asd = res.data.data
							this.$message({
								message: '登录成功！',
								type: 'success'
							});
							this.$store.commit('modifiy')
							console.log(this.$store.state.user.loginUp)
							console.log(this.$store.getters.getLoginUp)
							
							this.$router.push({
								name: 'home'
							});
						},
						// 请求失败时的处理方法 => 可省
						res => {
							this.message = res.data
							console.log(this.message)
							this.$notify.error({
								title: '错误',
								message: '邮箱已存在!'
							});
						}
						)
				}else if(this.authemail == false){
					this.$notify.error({
						title: '错误',
						message: '邮箱为空!'
					})
					}
				else if(this.authpass == false) {
					this.$notify.error({
						title: '错误',
						message: '密码为空!'
					});
				}
				
			}
		},
	}
</script>
<style>
	.center1 {
		position: absolute;
		left: 50%;
		top: 50%;
		margin-top: -150px;
		margin-left: -200px;
	}

	.el-form-item__label {
		text-align: center;
	}

	.containlogin {
		width: 40%;
		margin-top: 10%;
		text-align: center;
	}

	.hlogin {
		font-size: 40px;
		text-align: center;
	}

	.itemlogin {
		margin-bottom: 0px;
	}
</style>
